<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Typography 测试插槽</title>
	<link rel="stylesheet" href="../static/css/reset.css">
	<script src="../static/js/vue.global.prod.js"></script>
	<script src="../static/js/antd.min.open.js"></script>
	<script src="../static/js/icons-vue.js"></script>
</head>
<body>

<div id="app">
	<a-divider class="a-divi" orientation="left">可交互</a-divider><!-- =============================================================== -->
	<p class="desc">提供可编辑和可复制等额外的交互能力。</p>
	<a-typography-paragraph ref="myParRef" v-model:content="editableStr" :editable="ret_editable"></a-typography-paragraph>
	<p>不知道为什么，这里的插槽没有生效------<edit class="aut-icon"></edit></p>
	<a-typography-paragraph v-model:content="customIconStr" editable>
		<template #EditableIcon>
			<edit class="aut-icon"></edit>
		</template>
		<template #editabletooltip999>click to edit text</template>
	</a-typography-paragraph>
	
	<hr>
	<a-space>
		<a-button type="primary">Primary</a-button>
		<a-button>secondary</a-button>
		<a-dropdown>
			<template #overlay>
				<a-menu @click="handleMenuClick">
					<a-menu-item key="1">1st item</a-menu-item>
					<a-menu-item key="2">2nd item</a-menu-item>
					<a-menu-item key="3">3rd item</a-menu-item>
				</a-menu>
			</template>
			<a-button class="button-icon3">
				Actions <arrow-down-bold class="aut-icon"></arrow-down-bold>
			</a-button>
		</a-dropdown>
	</a-space>
	
</div>
<div class="h100"></div>

</body>
<script>
const Main = {
data() {
	return {
		message: 'Hello Vue!!',
		blockContent: 'AntV 是蚂蚁金服全新一代数据可视化解决方案，致力于提供一套简单方便、专业可靠、不限可能的数据可视化最佳实践。得益于丰富的业务场景和用户需求挑战，AntV 经历多年积累与不断打磨，已支撑整个阿里集团内外 20000+ 业务系统，通过了日均千万级 UV 产品的严苛考验。我们正在基础图表，图分析，图编辑，地理空间可视化，智能可视化等各个可视化的领域耕耘，欢迎同路人一起前行。',
		ellipsis: true,
		
		editableStr: '这是一个可编辑的文本【触发各种回调函数】。',
		customIconStr: '自定义编辑图标并替换工具提示文本。999',
		hideTooltipStr: '隐藏“编辑”工具提示。',
		lengthLimitedStr: '这是一个长度有限的可编辑文本。',
		clickTriggerStr: '文本或图标作为触发器-单击开始编辑。',
		customEnterIconStr: '在编辑字段中具有自定义输入图标的可编辑文本。99',
		noEnterIconStr: '可编辑文本，在编辑字段中没有输入图标。',
		
		stateToRadio: 'icon',
		chooseTrigger: ['icon'],
		
		is_mark: true,
		
		rows: 1,
		rows2: 1,
		article: `那是一年前，汪淼是“中华二号”高能加速器项目纳米构件部分的负责人。那天下午在良湘的工地上，一次短暂的休息中，他突然被眼前的一幅构图吸引了。作为一名风景摄影爱好者，现实的场景经常在他眼中形成一幅幅艺术构图。构图的主体就是他们正在安装的超导线圈，那线圈有三层楼高，安装到一半，看上去是一个由巨大的金属块和乱麻般的超低温制冷剂管道组成的怪物，仿佛一堆大工业时代的垃圾，显示出一种非人性的技术的冷酷和钢铁的野蛮。就在这金属巨怪前面，出现了一个年轻女性纤细的身影。这构图的光线分布也很绝：金属巨怪淹没在临时施工顶棚的阴影里，更透出那冷峻、粗糙的质感；而一束夕阳金色的光，透过顶棚的孔洞正好投在那个纤细的身影上，柔和的暖光照着她那柔顺的头发，照着工作服领口上白皙的脖颈，看上去就像一场狂暴的雷雨后，巨大的金属废墟上开出了一朵娇柔的花……`,
	
	
	}
},
mounted: function(){
	//实例挂载完成后被调用
	// console.log("实例挂载完成后被调用");
	this.$nextTick(function () {
		// 仅在整个视图都被渲染之后才会运行的代码
		// console.log("仅在整个视图都被渲染之后才会运行的代码");
		
	});
	// console.log("实例挂载完成后被调用2");
},
computed:{
	ret_ellipsis(){
		if(this.ellipsis){
			return {
				tooltip: 'I am ellipsis now!22'
			};
		}else{
			return false;
		}
	},
	ret_editable(){
		return {
			// tooltip: true,
			triggerType: ['text','icon'],
			onCancel: this.editOnCancel(),
			onChange: this.editOnChange(),
			onEnd: this.editOnEnd(),
			onStart: this.editOnStart(),
			
		};
	},
	ret_ellipsis(){
		return {
			rows: this.rows,
			expandable: true,
			suffix: '...',
			symbol: '展开>>',
			tooltip: '省略时，展示提示信息',
			// onEllipsis: (ellipsis) => {
			// 	console.log('Ellipsis changed:', ellipsis);
			// },
			onEllipsis: this.myOnEllipsis(),
			onExpand:(e)=>{
				console.log('展开了：', e);
			},
		};
	},
	ret_ellipsis2(){
		return {
			rows: this.rows2,
			// expandable: true,
			suffix: '...',
			symbol: '展开>>',
			tooltip: '省略时，展示提示信息',
			// onEllipsis: (ellipsis) => {
			// 	console.log('Ellipsis changed:', ellipsis);
			// },
			onEllipsis: this.myOnEllipsis(),
			onExpand:(e)=>{
				console.log('展开了：', e);
			},
		};
	},
	copyed(){
		return function(){
			console.log("一段文字被复制了。。。");
		}
	},
	
	
},
methods:{
	typExpand(){
		//也可以直接等于0
		this.rows2 = 10;
	},
	typRetract(){
		this.rows2 = 1;
	},
	myOnEllipsis(){
		return (ellipsis)=>{
			console.log('Ellipsis changed9999:', ellipsis);
		}
	},
	editOnCancel(){
		let HTIS = this;
		return function(){
			console.log("按 ESC 退出编辑状态时触发");
			console.log("editableStr：" + HTIS.editableStr);
		}
	},
	editOnChange(){
		let HTIS = this;
		return function(){
			console.log("文本域编辑时触发");
			console.log("editableStr：" + HTIS.editableStr);
		}
	},
	editOnEnd(){
		let HTIS = this;
		return function(){
			console.log("按 ENTER 结束编辑状态时触发");
			console.log("editableStr：" + HTIS.editableStr);
		}
	},
	editOnStart(){
		let HTIS = this;
		return function(){
			console.log("进入编辑中状态时触发");
			console.log("editableStr：" + HTIS.editableStr);
		}
	},
	
	radioToState(){
		if(this.stateToRadio == 'text'){
			this.chooseTrigger = ['text'];
		}else if(this.stateToRadio == 'icon'){
			this.chooseTrigger = ['icon'];
		}else{
			this.chooseTrigger = ['text', 'icon'];
		}
		// console.log(this.stateToRadio);
		// console.log(this.chooseTrigger);
	},
	handleMenuClick(e){
		console.log('handleMenuClick', e);
	},
	
	
},

}

const app = Vue.createApp(Main);
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component)};
app.use(antd);
let vm = app.mount("#app");

// console.log(Object.keys(window));
// console.log(dayjs.locale());
</script>
</html>
